<template>
  <div class="content">
    <div class="title">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }"><b>逾期清单</b></el-breadcrumb-item>
        <el-breadcrumb-item><b>催收管理</b></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="main-content">
      <el-tabs class="info-tabs" v-model="activeName" @tab-click="tapChange">
        <template v-for="vm in tapList">
          <el-tab-pane class="info-temp" :label="vm.name" :name="'tap'+vm.index">
            <div :is="vm.temp" :ref="vm.temp" keep-alive></div>
          </el-tab-pane>
        </template>
      </el-tabs>
    </div>
  </div>
</template>
<script>
export default {
  name: 'UrgeManageTab',
  components: {
    urgeManage: require('./urgeManage'),
    credit: require('../order/credit'),
    customInfo: require('../order/customInfo'),
    carBuyCommon: require('../order/carBuyCommon'),
    assurePerson: require('../order/assurePerson'),
    carAndCredit: require('../order/carAndCredit'),
    attachment: require('../order/attachment'),
    finance: require('../order/finance'),
    synthesize: require('../order/synthesize'),
    checkInfo: require('../order/checkInfo'),
    historyLoan: require('../order/historyLoan'),
    upload: require('../other/upload'),
  },
  data() {
    return {
      activeName: 'tap9',
      tapList: [
        { name: '征信结果', index: 0, temp: 'credit' },
        { name: '客户信息', index: 1, temp: 'customInfo' },
        { name: '共同购车人', index: 2, temp: 'carBuyCommon' },
        { name: '担保人', index: 3, temp: 'assurePerson' },
        { name: '车辆及贷款信息', index: 4, temp: 'carAndCredit' },
        { name: '附件', index: 5, temp: 'attachment' },
        { name: '历史贷款记录', index: 6, temp: 'historyLoan' },
        { name: '综合处理', index: 8, temp: 'synthesize' },
        { name: '财务结算', index: 7, temp: 'finance' },
        { name: '资产保全', index: 9, temp: 'urgeManage' },
        { name: '审核信息', index: 10, temp: 'checkInfo' },
      ],
      orderNo: this.$route.query.orderNo,
      isShow: this.$route.query.isShow
    };
  },
  methods: {
    tapChange() {
      console.log(this.activeName);
      this.$libs.scrollTop('.el-tabs__content');
      switch (this.activeName) {
        case 'tap0':
          this.$refs.credit[0].getCreditInfo(this.orderNo);
          break;
        case 'tap1':
          this.$refs.customInfo[0].getUserInfo(this.orderNo);
          break;
        case 'tap2':
          this.$refs.carBuyCommon[0].getInfo(this.orderNo);
          break;
        case 'tap3':
          this.$refs.assurePerson[0].getInfo(this.orderNo);
          break;
        case 'tap4':
          this.$refs.carAndCredit[0].getCarInfo(this.orderNo);
          this.$refs.carAndCredit[0].getLoanInfo(this.orderNo);
          break;
        case 'tap5':
          this.$refs.attachment[0].postDeal(this.orderNo, this.annexBatchNo);
          break;
        case 'tap6':
          this.$refs.historyLoan[0].getDate(this.orderNo, this.customerId);
          break;
        case 'tap7':
          this.$refs.finance[0].getFinanceData(this.orderNo);
          break;
        case 'tap8':
          this.$refs.synthesize[0].getData(this.orderNo);
          break;
        case 'tap9':
          this.$refs.urgeManage[0].getPageDetail(this.orderNo);
          break;
        case 'tap10':
          this.$refs.checkInfo[0].getInfo(this.orderNo);
          break;
        default:
          break;
      }
    }
  },
  mounted() {
    this.$refs.urgeManage[0].getPageDetail(this.orderNo);
    if (this.isShow == 'false') {
      this.$refs.urgeManage[0].isShowButton = false
    }
  }
};

</script>
<style lang="scss" scoped>
.content {
  padding: 10px;
  background: #F7F7F7;
  .title {
    color: #99A9BF;
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0px 10px 0px;
  }
  .main-content {
    background: #fff;
    position: fixed;
    top: 96px;
    bottom: 10px;
    left: 216px;
    right: 16px;
    overflow: auto;
    padding: 20px;
  }
}

</style>
